/**
 * @file VerificationCodeInput.tsx
 * @description 验证码输入组件，包含发送验证码和倒计时功能
 */

'use client'

import { Input, Button } from 'antd'
import { KeyOutlined } from '@ant-design/icons'
import { useAuth } from '@/app/context/auth-context'

/**
 * @component VerificationCodeInput
 * @description 验证码输入组件，提供验证码输入框和发送按钮
 * @returns {JSX.Element} 验证码输入区域
 */
export default function VerificationCodeInput() {
  const { 
    verificationCode, 
    setVerificationCode, 
    verificationCodeError,
    countdown, 
    handleSendCode 
  } = useAuth()

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value
    // 只允许输入数字
    if (/^\d*$/.test(value)) {
      setVerificationCode(value)
    }
  }

  return (
    <div className="flex gap-4 mb-4">
      <div className="flex-1">
        <Input
          value={verificationCode}
          onChange={handleChange}
          status={verificationCodeError ? 'error' : ''}
          prefix={<KeyOutlined />}
          placeholder="请输入验证码"
          size="large"
          maxLength={6}
          type="tel"
        />
        {verificationCodeError && (
          <div className="mt-1 text-red-500 text-sm">{verificationCodeError}</div>
        )}
      </div>
      <Button
        type="primary"
        size="large"
        disabled={countdown > 0}
        onClick={handleSendCode}
      >
        {countdown > 0 ? `${countdown}s` : '获取验证码'}
      </Button>
    </div>
  )
} 